<template>
  <p class="filters">
    <span
      v-for="item in filterList"
      :key="item.value"
      @click="$emit('update:visibility', item.value)"
      :class="{ selected: visibility === item.value }"
      >{{ item.label }}</span
    >
  </p>
</template>
<script>
export default {
  props: ["filterList", "visibility"],
};
</script>



<style scoped>
.filters > span {
  padding: 2px 4px;
  margin-right: 4px;
  border: 1px solid transparent;
  cursor: pointer;
}
.filters > span.selected {
  border-color: tomato;
}
</style>